<template>
  <div>
    <nav-header :headerTitle="'服务保障'" :navBgColor="'#fff'"></nav-header>
    <section class="page">
      <div class="p-header">
        <img src="@/assets/images/aboutUs/backdrop@2x.png" alt />
        <span>专业服务</span>
        <p>为您保驾护航</p>
      </div>
      <div class="null84"></div>
      <div class="p-items pi-div1">
        <div class="pi-img">
          <div class="content">
            <img src="@/assets/images/aboutUs/fw_kf@2x.png" alt />
          </div>
        </div>
        <div class="pi-div ">
          <div>专属客服服务</div>
          <p>完成注册后，您可以添加您的专属微信客服，客服会为您提供专业的咨询服务，让您轻松玩转BWRM，拓展人脉资源，开启财富之路。</p>
        </div>
      </div>
      <div class="null64"></div>
      <div class="p-items pi-div2">
        <div class="pi-img">
          <div class="content">
            <img src="@/assets/images/aboutUs/fw_wx@2x.png" alt />
          </div>
        </div>
        <div class="pi-div ">
          <div>专业技术支持</div>
          <p>BWRM具有超百人的前端，后台，移动端研发团队以及客户服务团队，为您提供专业稳定高效的服务。</p>
        </div>
      </div>
      <div class="null64"></div>
      <div class="p-items pi-div3">
        <div class="pi-img">
          <div class="content">
            <img src="@/assets/images/aboutUs/fw_yue@2x.png" alt />
          </div>
        </div>
        <div class="pi-div ">
          <div>收益真实可靠</div>
          <p>多重收益提成，您邀请的好友成为会员以及消费您都可以获得高额提成，您可以随时查看每一笔提成的明细</p>
        </div>
      </div>
      <div class="null64"></div>
      <div class="p-items pi-div4">
        <div class="pi-img">
          <div class="content">
            <img src="@/assets/images/aboutUs/fw_tx@2x.png" alt />
          </div>
        </div>
        <div class="pi-div ">
          <div>提现到账服务</div>
          <p>BWRM提供支付宝/微信双重提现服务，除节假日外，您的提现会在48小时到账。</p>
        </div>
      </div>
      <div class="null64"></div>
      <div class="p-items pi-div5">
        <div class="pi-img">
          <div class="content">
            <img src="@/assets/images/aboutUs/fw_plan@2x.png" alt />
          </div>
        </div>
        <div class="pi-div ">
          <div>专业任务服务</div>
          <p>BWRM对流量主严格审核，让您收获精准人脉。您可以随时查看您的任务完成进度，以及流量主完成任务的截图，任务快速，真实有效。</p>
        </div>
      </div>
      <div class="null64"></div>
    </section>
  </div>
</template>

<script>
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "Service",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {}
    };
  },
  created() {},
  mounted() {
    this.$setgoindex();
    this.init();
  },
  methods: {
    init: function() {}
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin-top: 86px;
  .null16 {
    width: 100%;
    height: 16px;
  }
  .null32 {
    width: 100%;
    height: 32px;
  }
  .null48 {
    width: 100%;
    height: 48px;
  }
  .null64 {
    width: 100%;
    height: 84px;
  }
  .null84 {
    width: 100%;
    height: 84px;
  }
  .p-header {
    width: 100%;
    height: 324px;
    position: relative;
    font-family: PingFangSC-Regular;
    font-size: 64px;
    color: #ffffff;
    letter-spacing: 20px;
    text-shadow: 2px 2px 1px #fdd148;
    text-align: left;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      left: 123px;
      top: 58px;
    }
    p {
      position: absolute;
      left: 123px;
      top: 146px;
    }
  }
  .pi-div1 {
    height: 248px;
  }
  .pi-div2 {
    height: 200px;
  }
  .pi-div3 {
    height: 200px;
  }
  .pi-div4 {
    height: 152px;
  }
  .pi-div5 {
    height: 248px;
  }
  .p-items {
    width: 100%;
    position: relative;
    .pi-img {
      width: 110px;
      height: 110px;
      background: #fbf8f8;
      border-radius: 8px;
      position: absolute;
      left: 32px;
      top: 0px;
      .content {
        width: 100%;
        height: 100%;
        position: relative;
      }
      img {
        width: 55px;
        height: 55px;
        position: absolute;
        left: 27.5px;
        top: 27.5px;
      }
    }

    .pi-div {
      position: absolute;
      left: 166px;
      right: 32px;
      top: 0px;
      text-align: left;
      div {
        font-family: PingFangSC-Medium;
        font-size: 34px;
        color: #303133;
        font-weight: bold;
        line-height: 48px;
      }
      p {
        font-family: PingFangSC-Regular;
        font-size: 30px;
        color: #818181;
        line-height: 48px;
        margin-top: 8px;
      }
    }
  }
}
</style>
